<template>
	<view class="login-container loginBg">
		<!-- 顶部logo区域 -->
		<view class="logo-area">
			<image src="../../static/loginLogo.png" class="logo-block" />
		</view>

		<!-- 登录表单区域 -->
		<view class="login-form">
			<view class="form-wrapper">
				<!-- 登录选项卡移到表单内部 -->
				<view class="login-tabs">

					<text class="tab-item active" v-if="state.loginStatus == 'user'">用户登录</text>
					<text class="tab-item" v-else @click="changeLoginType('user')">用户登录</text>
					<text class="tab-item active" v-if="state.loginStatus == 'admin'">管理端登录</text>
					<text class="tab-item" v-else @click="changeLoginType('admin')">管理端登录</text>
				</view>

				<view class="form-item">
					<text class="iconfont icon-phone"></text>
					<input type="text" placeholder="请输入手机号" v-model="state.userInfo.phone" />
				</view>
				<view class="form-item">
					<text class="iconfont icon-lock"></text>
					<input type="password" placeholder="请输入密码" v-model="state.userInfo.password" />
				</view>

				<!-- 辅助链接 -->
				<!-- <view class="helper-links" v-if="state.loginStatus == 'user'">
					<text class="link" @click="register()">注册</text>
				</view> -->
				<button class="register-btn" @click="register()" v-if="state.loginStatus == 'user'">注册</button>
				<!-- 登录按钮 -->
				<button class="login-btn" @click="handleLogin">登录</button>
				<button class="fastlogin-btn" @click="handleFastLogin" open-type="getPhoneNumber"
					v-if="state.loginStatus == 'user'" @getphonenumber="handleUserClick">
					<!-- <image class="wechat" src="../../static/wechatlogo.png" alt="" /> -->
					手机号快捷登录
				</button>
			</view>
		</view>

		<!-- 用户协议 - 移到表单外部 -->
		<view class="agreement">
			<radio :checked="state.check" color="#ff4444" @click="aggrement()"></radio>
			<text class="agreement-text">
				我已阅读并同意
				<text class="link">《用户服务协议》</text>
				和
				<text class="link">《隐私政策》</text>
			</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from "vue";
	const isAgree = ref(false);
	import {
		request,
		formatDateTime
	} from "../../js/util.js";
	const state = reactive({
		loginStatus: 'user', //admin
		userInfo: {},
		check: false
	});
	const aggrement = () => {
		state.check = !state.check
	}
	const handleLogin = async () => {
		if (!state.check) {
			uni.showToast({
				title: "请先同意用户协议再登录",
				icon: "none"
			})
			return
		}
		try {

			let submitData = {}
			if (state.loginStatus == 'admin') {
				submitData = {
					user: state.userInfo.phone,
					password: state.userInfo.password,
				}
			} else {
				submitData = {
					phone: state.userInfo.phone,
					password: state.userInfo.password,
					type: 1,
				};
			}

			const res = await request(state.loginStatus == 'admin' ? "loginAdmin" : "loginUser", submitData);
			console.log('res222', res)
			if (res.status) {
				if (state.loginStatus == 'admin') {
					let result = res.result
					uni.setStorageSync("userid", result._id);
					// uni.setStorageSync("phone", result.phone);
					// 登录成功后
					uni.setStorageSync("userInfo", {
						role: "admin", // 或其他角色
					});
					uni.$emit("updateTabbar");
					uni.showToast({
						title: "登录成功",
						icon: "success",
					});
					setTimeout(() => {
						uni.switchTab({
							url: "/pages/activity/activity",
						});
					}, 1000);
				} else {
					let result = res?.result
					uni.setStorageSync("userid", result._id);
					uni.setStorageSync("phone", result.phone);
					// 登录成功后
					uni.setStorageSync("userInfo", {
						role: "user", // 或其他角色
					});
					uni.$emit("updateTabbar");
					uni.showToast({
						title: "登录成功",
						icon: "success",
					});
					setTimeout(() => {
						uni.switchTab({
							url: "/pages/home/home",
						});
					}, 1000);
				}
			} else {
				uni.showToast({
					title: res.result.message || "登陆失败",
					icon: "none",
				});
			}
		} catch (error) {
			console.error("登录失败:", error);
		}
	};

	async function handleUserClick(e) {
		if (!state.check) {
			uni.showToast({
				title: "请先同意用户协议再登录",
				icon: "none"
			})
			return
		}
		if (e.detail.code) {
			let submitData = {
				cloudID: e.detail.cloudID,
			};
			const data = await request("getPhone", submitData);
			console.log("handleUserClick", data);
			if (data.status) {
				let phone = data.result.data.phoneNumber;
				uni.setStorageSync("phone", phone);
				state.phone = phone;
				const getOpenId = await request("getOpenId");
				if (getOpenId.status) {
					login(state.phone, getOpenId.result);
				}
			}
		}
	}

	async function login(phone, openid) {
		let submitData = {
			phone,
			openid,
			type: 0,
		};
		const data = await request("loginUser", submitData);
		console.log("login", data);
		if (data.status) {
			let result = data?.result[0]
			uni.setStorageSync("userid", result._id);
			uni.setStorageSync("phone", result.phone);
			// 登录成功后
			uni.setStorageSync("userInfo", {
				role: "user", // 或其他角色
			});
			uni.$emit("updateTabbar");
			uni.showToast({
				title: "登录成功",
				icon: "success",
			});
			setTimeout(() => {
				uni.switchTab({
					url: "/pages/home/home",
				});
			}, 1000);
		} else {
			uni.showToast({
				title: "登录失败",
				icon: "error",
			});
		}
	}

	function changeLoginType(type) {
		state.loginStatus = type
	}

	const register = () => {
		uni.navigateTo({
			url: "/pages/register/register",
		});
	};
	onMounted(() => {
		let userid = uni.getStorageSync("userid");
		let phone = uni.getStorageSync("phone")
		let userInfo = uni.getStorageSync("userInfo")
		if (userid && phone && userInfo) {
			uni.switchTab({
				url: "/pages/home/home",
			});
		} else if (userid && userInfo.role == 'admin') {
			uni.switchTab({
				url: "/pages/activity/activity",
			});
		}
		// const res = request('addAdmin', {
		// 	user: "123",
		// 	password: "123",
		// 	auth: "1"
		// });
		// console.log('res', res)
	})
</script>



<style lang="scss">
	.loginBg {
		// background: url('../../static/loginLogo.png');
		background: url("");
	}

	.login-container {
		min-height: 100vh;
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
		padding: 0 10rpx;

		.logo-area {
			padding-top: 50rpx;
			// margin-bottom: 80rpx;
			display: flex;
			justify-content: center;

			.logo-block {
				width: 400rpx;
				height: 400rpx;
				display: block;
			}
		}

		.login-form {
			padding: 0 30rpx;
			margin-bottom: 40rpx;

			.form-wrapper {
				background-color: #fff;
				border-radius: 20rpx;
				padding: 40rpx 30rpx;
				box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);

				.login-tabs {
					display: flex;
					gap: 40rpx;
					margin-bottom: 40rpx;

					.tab-item {
						font-size: 32rpx;
						color: #999;

						&.active {
							color: #333;
							position: relative;

							&::after {
								content: "";
								position: absolute;
								bottom: -10rpx;
								left: 0;
								width: 100%;
								height: 4rpx;
								background-color: #ff4444;
							}
						}
					}
				}

				.form-item {
					background-color: #ffffff;
					border-bottom: 1px solid #e5e5e5;
					margin-bottom: 30rpx;
					display: flex;
					align-items: center;
					padding: 0 10rpx;

					.iconfont {
						font-size: 40rpx;
						color: #999;
						margin-right: 20rpx;
					}

					input {
						flex: 1;
						height: 100rpx;
						font-size: 28rpx;
					}
				}

				.helper-links {
					display: flex;
					justify-content: space-between;
					margin-bottom: 60rpx;

					.link {
						color: #dfdfdf;
						font-size: 26rpx;
					}
				}

				.register-btn {
					background-color: #1890ff;
					color: #fff;
					border-radius: 100rpx;
					height: 90rpx;
					line-height: 90rpx;
				}

				.login-btn {
					background-color: #ff4444;
					color: #fff;
					border-radius: 100rpx;
					height: 90rpx;
					line-height: 90rpx;
					margin-top: 20rpx;
				}

				.fastlogin-btn {
					background-color: rgb(40, 196, 69);
					color: #fff;
					border-radius: 100rpx;
					height: 90rpx;
					line-height: 90rpx;
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 20rpx;
				}

				.wechat {
					width: 50rpx;
					height: 50rpx;
					margin-right: 20rpx;
				}
			}
		}

		// 移到外部的协议样式
		.agreement {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			color: #666;
			padding: 0 40rpx;

			.link {
				color: #ff4444;
			}

			radio {
				transform: scale(0.7);
				margin-right: 10rpx;
			}
		}
	}
</style>